<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>教师-查看学生实习日志</title>
    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/index.css">
    <style>
        .layui-form-select dl {
            max-height: 260px;
        }
    </style>
</head>
<body>
<div class="body-head"><span>实习日志管理&nbsp;>&nbsp;查看学生实习日志</span></div>
<div class="demoTable">
    <label class="layui-form-label">毕业年份：</label>
    <div class="layui-inline">
        <input class="layui-input" type="text" id="yearSelector">
    </div>
    <button class="layui-btn layui-btn-sm" data-type="reload" id="year-btn">搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="check">批改</a>
</script>

<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use(['table', 'jquery', 'form', 'layedit','laydate'], function () {
        let table = layui.table;
        let $ = layui.$;
        let form = layui.form;
        let layedit = layui.layedit;
        let laydate = layui.laydate;

        laydate.render({
            elem: '#yearSelector', //指定元素
            type: 'year'
        });

        let check_index = layedit.build('check_content', {
            height: 150
        });
        //提交时把值同步到文本域中
        form.verify({
            name: function (value) {
                if (value.length == 0) {
                    return "标题不能为空";
                }
            },
            //content富文本域中的lay-verify值
            content: function (value) {
                return layedit.sync(check_index);
            }
        });

        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow
        table.render({
            elem: '#test',
            url: '${ctx}/teacher/showStudentInternshipLogInfo.action',
            method: 'POST',
            toolbar: '#toolbarDemo',
            title: '实习日志表',
            page: true,
            limit: 10,
            limits: [3, 5, 10],
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'studentNumber',
                    title: '学号',
                    width: 150,
                }, {
                    field: 'content',
                    title: '内容',
                    width: 588,
                }, {
                    field: 'uploadTime',
                    title: '上传时间',
                    width: 180,
                }, {
                    field: 'updateTime',
                    title: '批改时间',
                    width: 180,
                }, {
                    field: 'status',
                    title: '状态',
                    width: 80
                }, {
                    fixed: 'right',
                    align: 'center',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 100
                }]
            ],
            done: function(res, curr, count) {
                $("[data-field='status']").children().each(function () {
                    if ($(this).text() == '已阅') {
                        $(this).css('color', 'blue');
                    } else if ($(this).text() == '未阅') {
                        $(this).css('color', 'red')
                    }
                });
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                let result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                }
            }
        });

        let year = $("#yearSelector");
        let active = {
            reload: function () {
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1  //重新从第1页开始
                    },
                    where: {
                        year: year.val()
                    }
                });
            }
        };
        $('#year-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(test)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'check':
                    layer.open({
                        type: 1,
                        area: ['800px', '620px'],
                        title: '详情',
                        content: $("#check_window"),
                        shade: 0,
                        cancel: function (index) {
                            layer.closeAll();
                        }
                    });
                    //设置内容
                    $("#id").val(data.id);
                    $("#check_name").val(data.name);
                    $("#check_comment").val(data.comment);
                    $("#check_grade").val(data.grade);
                    $("#check_status").val(data.status);
                    $("#check_teacher").val(data.teacherName);
                    $("#check_uploadTime").val(data.uploadTime);
                    $("#check_updateTime").val(data.updateTime);
                    layedit.setContent(check_index, data.content);
                    break;
            }
        });

        $("#btn").on("click", function () {

            let id = $("#id").val();
            let grade = $("#check_grade").val();
            let comment = $("#check_comment").val();
            if (!/^\d+$/.test(grade)) {
                layer.msg("评分项只能输入数字");
            } else if (comment.length == 0) {
                layer.msg("评语项不能为空");
            } else {
                layer.confirm("确定要提交吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
                    $.ajax({
                        type: "post",
                        url: "${ctx}/teacher/checkInternshipLog.action",
                        data: {
                            id: id,
                            grade: grade,
                            comment: comment
                        },
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded",
                        success: function (data) {
                            if (data.flag) {
                                layer.msg("批改完成");
                            } else {
                                layer.msg("批改失败");
                            }
                            setTimeout(() => {
                                window.location.reload()
                            }, 1500);

                        },
                        error: function () {
                            layer.msg("请求失败");
                        }
                    });
                    layer.closeAll('dialog');
                });
            }
        });


        $("#btnClose").on("click", function (index) {
            layer.closeAll();
        });

    });
</script>

<%--详情--%>
<div id="check_window" style="display:none; margin-top: 16px">
    <input type="hidden" id="id">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block" style="width: 600px">
                <input type="text" readonly="readonly" id="check_name" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">上传时间</label>
            <div class="layui-input-block" style="width: 238px">
                <input type="text" readonly="readonly" id="check_uploadTime" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">修改时间</label>
            <div class="layui-input-block" style="width: 238px">
                <input type="text" readonly="readonly" id="check_updateTime" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block" style="width: 100px">
                <input type="text" readonly="readonly" id="check_status" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">评阅老师</label>
            <div class="layui-input-block" style="width: 100px">
                <input type="text" readonly="readonly" id="check_teacher" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">评分</label>
            <div class="layui-input-block" style="width: 100px">
                <input type="text" id="check_grade" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text" style="width: 710px">
        <label class="layui-form-label">评语</label>
        <div class="layui-input-block">
            <textarea id="check_comment" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text" style="width: 710px">
        <label class="layui-form-label">日志</label>
        <div class="layui-input-block">
            <textarea id="check_content" readonly="readonly" class="layui-textarea layui-disabled"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md-offset5">
            <button type="button" id="btn" class="layui-btn layui-btn-normal">提交</button>
            <button type="button" id="btnClose" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</div>

<script src="${ctx}/static/js/index.js"></script>
</body>
</html>

